<template>
  <div class="coupon">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);line-height: 3;padding-left: 1em;">
      <el-breadcrumb-item>营销管理</el-breadcrumb-item>
      <el-breadcrumb-item>优惠券详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cou-contert">
      <div class="s_title">
        <el-input placeholder="手机号" v-model="input"></el-input>
        <el-button type="primary">搜索</el-button>
        <div class="dels">xxx优惠券  发放1000张 领取400张 核销20张</div>
        <div class="markPage">
          <div class="list-bs">
            <el-table :data="tableData" height="550" border style="width: 100%;">
              <el-table-column prop="id" label="ID" width="180">
              </el-table-column>
              <el-table-column prop="name" label="手机号" width="180">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    {{ scope.row.name }}
                    <!-- <el-tag size="medium">{{ scope.row.name }}</el-tag> -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="券号" width="150">
              </el-table-column>
              <el-table-column prop="a" label="领取状态" width="150">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-button v-if="scope.row.a==1" size="mini" type="success" plain>已领取</el-button>
                    <el-button v-if="scope.row.a==2" size="mini" type="warning" plain>未领取</el-button>
                    <el-button v-if="scope.row.a==3" size="mini" type="info" plain>已核销</el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="核销日期">

              </el-table-column>
            </el-table>
          </div>
          <div class="pages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="12">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      input: '',
      currentPage4:1,
      tableData: [{
        id: '10001',
        a: '1',
        date: '2016-05-03',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10002',
        a: '2',
        date: '2016-05-02',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10003',
        a: '3',
        date: '2016-05-04',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10004',
        date: '2016-05-01',
        name: '18888888888',
        a: '4',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10005',
        a: '2',
        date: '2016-05-08',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10006',
        a: '3',
        date: '2016-05-06',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10007',
        a: '4',
        date: '2016-05-07',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      , {
        id: '10006',
        a: '3',
        date: '2016-05-06',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10007',
        a: '4',
        date: '2016-05-07',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10006',
        a: '3',
        date: '2016-05-06',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10007',
        a: '4',
        date: '2016-05-07',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10006',
        a: '3',
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '10007',
        a: '4',
        date: '2016-05-07',
        name: '18888888888',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
    }
  },
  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      found() {
        this.$router.push({
          path: '/found'
        })
      }
    },
}
</script>

<style scoped="scoped">
  .s_title{
    margin: 30px 0 0 15px;
    font-size: 14px;
    }
  .el-input{
    width: 15%;
    margin-right: 10px;
  }
  .pages {
    text-align: center;
    padding-top: .9091rem;
  }
  .flex li {
    margin-right: 10px;
    cursor: pointer
  }
  .dels{
    padding: .8182rem 0 .3rem 0;
  }
</style>
